CSS Full Course Day 14 [Hindi] 💻 | Keyframes & Animation Properties 🚀 | Mohit Decodes

🎬 CSS Tutorial – Day 14: Keyframes & Animation Properties

Welcome to Day 14 of the CSS Full Course [Hindi] by Mohit Decodes! Today, we’ll dive into creating advanced animations using CSS Keyframes and animation properties.

🔹 What are CSS Keyframes?

Keyframes let you define styles at specific points during the animation sequence, enabling complex animations beyond simple transitions.

🔹 Defining Keyframes

css
CopyEdit
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

🔹 Animation Properties

PropertyDescription
animation-nameName of the keyframes animation
animation-durationHow long the animation runs (e.g., 2s)
animation-timing-functionSpeed curve (ease, linear, ease-in-out)
animation-delayDelay before animation starts
animation-iteration-countNumber of times animation runs (infinite for endless)
animation-directionNormal or alternate direction


⚙️ Example CSS:

css
CopyEdit
.box {
width: 150px;
height: 150px;
background-color: #ff5722;
animation-name: slideIn;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}

💡 Tips:

  1. Use keyframes for more complex animations than simple transitions
  2. Control timing and repetition with animation properties
  3. Combine multiple animations for creative effects